<template>
  <div class="navList">
    <van-grid column-num="4">
      <van-grid-item
        v-for="(item, i) in navList"
        :key="item.title"
        :icon="item.imgSrc || `/imgs/nav${i + 1}.png`"
        :text="item.title"
      />
    </van-grid>
  </div>
</template>

<script>
import * as api from "@/api/index";

export default {
  data() {
    return {
      navList: [
        { title: "大盘行情", imgSrc: "./imgs/nav1.png", linkto: "" },
        { title: "股票组合", imgSrc: "./imgs/nav2.png", linkto: "" },
        { title: "股票开户", imgSrc: "./imgs/nav3.png", linkto: "" },
        { title: "选股攻略", imgSrc: "./imgs/nav4.png", linkto: "" },
        { title: "指数选基", imgSrc: "./imgs/nav5.png", linkto: "" },
        { title: "基金组合", imgSrc: "./imgs/nav6.png", linkto: "" },
        { title: "私募基金", imgSrc: "./imgs/nav7.png", linkto: "" },
        { title: "基金必看", imgSrc: "./imgs/nav8.png", linkto: "" },
      ],
    };
  },
  async mounted() {
    let res = await api.getNavList();
    this.navList = res.navList;
  },
};
</script>

<style lang="less" scoped>
.navList {
  padding-top: 1rem;
}
</style>
